<!--
 *                                                     __----~~~~~~~~~~~------___
 *                                    .  .   ~~//====......          __--~ ~~
 *                    -.            \_|//     |||\\  ~~~~~~::::... /~
 *                 ___-==_       _-~o~  \/    |||  \\            _/~~-
 *         __---~~~.==~||\=_    -_--~/_-~|-   |\\   \\        _/~
 *     _-~~     .=~    |  \\-_    '-~7  /-   /  ||    \      /
 *   .~       .~       |   \\ -_    /  /-   /   ||      \   /
 *  /  ____  /         |     \\ ~-_/  /|- _/   .||       \ /
 *  |~~    ~~|--~~~~--_ \     ~==-/   | \~--===~~        .\
 *           '         ~-|      /|    |-~\~~       __--~~
 *                       |-~~-_/ |    |   ~\_   _-~            /\
 *                            /  \     \__   \/~                \__
 *                        _--~ _/ | .-~~____--~-/                  ~~==.
 *                       ((->/~   '.|||' -_|    ~~-/ ,              . _||
 *                                  -_     ~\      ~~---l__i__i__i--~~_/
 *                                  _-~-__   ~)  \--______________--~~
 *                                //.-~~~-~_--~- |-------~~~~~~~~
 *                                       //.-~~~--\
 *                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *                               神兽保佑            永无BUG
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-18 18:01:42
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-22 14:45:45
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <div class="app-container">
    <el-steps :active="1" align-center process-status="wait">
      <el-step
        title="确认订单"
        description="确认订单信息，支付方式等"
      ></el-step>
      <el-step title="订单支付" description="查看支付结果"></el-step>
    </el-steps>
    <el-card class="box-card" shadow="never" style="margin-top: 20px">
      <div>订单信息</div>
      <el-table
        :data="tableData"
        class="table"
        style="width: 100%"
        border
        strip
      >
        <el-table-column prop="name" label="产品名称"></el-table-column>
        <el-table-column prop="availableDays" label="有效期">
          <template #default="{ row }">{{ row.availableDays }}天</template>
        </el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="price" label="单价">
          <template #default="{ row }">￥{{ row.price }}</template>
        </el-table-column>
        <template #append>
          <div style="padding: 16px; text-align: center">
            付款小计 :
            <span class="red">￥998</span>
          </div>
        </template>
      </el-table>
      <div style="margin-top: 20px">支付方式</div>
      <el-radio-group v-model="payType" class="pay-type">
        <el-radio :label="1">企业账户</el-radio>
        <el-radio :label="2">
          <img src="~@/assets/img/AlipayLogo.png" />
        </el-radio>
        <el-radio :label="3">
          <img src="~@/assets/img/WechatPayLogo.png" />
        </el-radio>
      </el-radio-group>
      <div style="margin-top: 20px">
        联系方式
        <span style="font-size: 12px; color: rgba(0, 0, 0, 0.45)">
          为保证服务质量，请填写您的联系方式
        </span>
      </div>
      <el-form
        ref="form"
        :inline="true"
        :model="model"
        :rules="rules"
        style="margin-top: 20px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="model.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="number">
          <el-input v-model="model.number" placeholder="手机号码"></el-input>
        </el-form-item>
      </el-form>
      <div class="pay-footer">
        <div>
          支付金额：
          <span class="money">￥998</span>
        </div>
        <el-button
          style="width: 120px; margin-top: 20px"
          type="primary"
          @click="handleSubmit"
        >
          确认支付
        </el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'ShoppingPay',
  data() {
    return {
      tableData: [
        {
          name: '机器人',
          availableDays: '30',
          type: '产品功能',
          price: 998,
        },
      ],
      payType: 1,
      model: {
        name: '',
        number: '',
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],
        number: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {})
    },
  },
}
</script>
<style lang="scss" scoped>
.table {
  margin-top: 20px;

  ::v-deep {
    th {
      background: #fafafa !important;
    }
    th,
    td {
      padding: 12px !important;
    }
  }
  .red {
    color: red;
    // font-size: 20px;
  }
}
.pay-type {
  margin-top: 20px;
  img {
    width: 100px;
    vertical-align: middle;
  }
}
.pay-footer {
  margin: 20px 0;
  border-top: 1px solid #f0f0f0;
  padding-top: 32px;
  text-align: right;
  .money {
    font-size: 20px;
    color: red;
  }
}
</style>
